<template>
  <div class="accPay">
    <!-- 需要使用 button 来授权登录 -->
    <button v-if="canIUse" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">授权登录</button>
    <view v-else>请升级微信版本</view>
  </div>
</template>
<script>
import { getToken } from '@/api'
export default {
  data() {
    return {
      /* 判别我们上面的button微信版本 是否可用授权 */
      canIUse: wx.canIUse('button.open-type.getUserInfo')
    }
  },
  methods: {
    bindGetUserInfo(e) {
      /* 要使用授权必须要使用我们现在使用的后台的appid 如果不符合将不会有反应 */
      // console.log(e)
      let { encryptedData, iv, rawData, signature } = e.mp.detail
      // console.log(encryptedData,iv,rawData,signature)
      wx.login({
        success(res) {
          if (res.code) {
            // 发起网络请求
            let { code } = res
            //发送请求获取token
            getToken({
              code,
              encryptedData,
              iv,
              rawData,
              signature
            }).then(res => {
              // console.log(res.data.message.token)
              const { token } = res.data.message
              if (token) {
                //将token保存到本地
                wx.setStorageSync('token', token)
                //返回上一层
                wx.navigateBack({
                  delta: 1
                })
              }
            })
          } else {
            console.log('登录失败！' + res.errMsg)
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.accPay {
  padding: 30rpx 0;
  border: 2px solid #ccc;
  .accompany {
    width: 30%;
    margin: 0 auto;
    padding: 20rpx 0;
    font-size: 32rpx;
  }
}
</style>


